<template>
  <el-popover placement="right"
              width="235"
              trigger="click">
    <div>用户ID：{{user.id}}</div>
    <div>用户名：<font @click="view(user.id)"
            style="color:#409EFF;cursor: pointer;">{{user.name}}</font>
    </div>
    <div>昵称：{{user.nick_name}}</div>
    <div>活跃时间：{{user.active_at*1000 | timeFormat}}</div>
    <div v-if="user.is_disabled || user.is_speak_banned">账户状态：
      <el-tag type="danger"
              v-if="user.is_disabled">禁用</el-tag>
      <el-tag type="danger"
              v-if="user.is_speak_banned">禁言</el-tag>
    </div>
    <div slot="reference"
         style="display:flex;
                 align-items: center;justify-content: space-around">
      <el-avatar size="medium"
                 :src="user.avatar.url"></el-avatar>
      <span style="margin-left:5px"
            v-if="nameRequire">{{user.name}}</span>
    </div>
    <user-info ref="userInfo"></user-info>
  </el-popover>
</template>

<script>
import { timeFormat } from '@/utils/filters'
import userInfo from '@/components/common/user-info'

export default {
  props: {
    user: {
      type: Object,
      default: () => {
        return {}
      }
    },
    nameRequire: {
      type: Boolean,
      default: false
    }
  },
  filters: {
    timeFormat
  },
  components: {
    userInfo
  },
  methods: {
    view (id) {
      this.$refs.userInfo.open(id)
    }
  }
}
</script>

<style>
</style>
